<template>
	<view class="processFlow">
		<model-page>
		<Search :searchResult="serchText">
			<view class="cancelSearch" @click="cancelSearch">
				取消
			</view>
		</Search>
		<Tabs :tabsList="tabsList" @change="changeTabs" ref="tabsRef">
		 <template #right>
		 	<image :src="`/static/image/alarm/${havenIf ? 'sort_active' : 'sort'}.png`" mode="" class="sort" @click="changeSort"></image>
		 </template>
		</Tabs>
		<!-- 表格-->
		<view class="tableWrap">
			<Table :headList="headList" :tableData="alarmInfoList" :total="total" v-model:pageNum="postData.pageNum" :pageSize="postData.pageSize" @checkPage="checkPage" :stateList="stateList"></Table>
		</view>
		</model-page>

	</view>
	<!-- 显示顶部筛选框-->
			<uni-popup ref="popup" background-color="#fff" @maskClick="changeSort">
				<view class="popup_wrap">
					<view class="popup_title">
						告警类型
					</view>
					<view class="popup_content">
						<view class="popup_item" v-for="(val,index) in alarmTypeList" :key="index" :class="{
							popActive:index === typeCurrent
						}" @click="selectType(index,val.id)">
							{{val.label}}
						</view>
					</view>
				</view>

			</uni-popup>
</template>

<script setup> 
	import {nextTick, reactive, ref} from 'vue'
	import Table from '../../../component/Table.vue';
	import Tabs from '../../../component/Tabs.vue';
	import Search from "../../../component/Search.vue"
	import {getAlertTypeList,getAlerInfoList} from '@/api/alarm.js'
	import {onLoad,onShow} from "@dcloudio/uni-app"
	const tabsList = [{id:null,label:"全部"},{id:0,label:"待处理"},{id:1,label:"已处理"},{id:2,label:"处理中"},]
	const tabsRef = ref(null)
	const searchText = ref("")
	const popup = ref()
	const sortFlag = ref(true) //启用筛选条件
	const havenIf = ref(false)
	const changeSort = ()=>{
		sortFlag.value = !sortFlag.value
		if(sortFlag.value){
		popup.value.close()
		}else{
		popup.value.open("bottom")
		}
	}
	const typeCurrent = ref(0)
//********************************************* 获取告警类型列表********************************************
	const alarmTypeList = ref([]) //告警类型列表
	const reqAlertTypeList = async()=>{
	try{
	const {code,data:res} = await getAlertTypeList()
	alarmTypeList.value = res.map(val=>{
		return {
			id:val.alertTypeId,
			label:val.alertTypeName
		}
	})
	alarmTypeList.value.unshift({
		id:null,
		label:"全部"
	})	
	}catch(e){
		//TODO handle the exception
		return Promise.reject(e)
	}

	}
	reqAlertTypeList()
//******************************************** 获取告警列表信息**********************************************
	const headList = ref([
		{
			title:"房间",
			props:"buildRoomName",
			width:"15%"
		},
		{
			title:"老人名",
			props:"elderName",
			width:"15%"
		},
		{
			title:"报警类型",
			props:"alertTypeName",
			width:"20%"
		},
		{
			title:"告警事件",
			props:"alertContent",
			width:"30%"
		},
		{
			title:"状态",
			props:"alertStatus",
			width:"10%"
		},
	])
	const stateList = [{
		id:0,
		label:"待处理",
		color:"#2778FF",
		path:"/packageAlarmNotice/pages/urgentAlarm/urgentAlarm"
	},{
		id:1,
		label:"已处理",
		color:"#00C45C",
		path:"/packageAlarmNotice/pages/urgentAlarm/urgentAlarm"
	},
	{
		id:2,
		label:"处理中",
		color:"#ff9001",
		path:"/packageAlarmNotice/pages/urgentAlarm/urgentAlarm"
	}
	]
	const alarmInfoList = ref([]) //告警列表
	const postData =ref({
		pageNum:1,
		pageSize:10
	}) 
	const total = ref(0)
	const reqAlarmInfoList = async()=>{
		try{
		const {code,data:res} = await getAlerInfoList(postData.value)
		if(code === 200){
			total.value = res.total
			alarmInfoList.value = res.list
		}
		}catch(e){
			//TODO handle the exception
			return Promise.reject(e)
		}
		
	}
	const serchText = ref("")
	const cancelSearch = ()=>{
		serchText.value = ""
		delete postData.value.elderId
		reqAlarmInfoList()
	}
	onLoad(()=>{
		uni.$on("undateElderId",(option)=>{
			const {type,searchResult} = option
			serchText.value = searchResult || ""
			delete postData.value.alertStatus
			delete postData.value.alertTypeId
			postData.value.pageNum = 1
			postData.value.elderId = type
			nextTick(()=>{
				tabsRef.value.changeTabs(0,null)
			})
		})
		reqAlarmInfoList()	
	})
	onShow(()=>{
		reqAlarmInfoList()
	})
	// 切换分页
	const checkPage = (type)=>{
		reqAlarmInfoList()
	}
	//切换处理状态
	const changeTabs = (e)=>{
		postData.value.pageNum = 1
		if(e !== null){	
		postData.value.alertStatus = e
		}else{
		delete postData.value.alertStatus
		}
		reqAlarmInfoList()
	}
	// 筛选条件
	const selectType = (index,id)=>{
		postData.value.pageNum = 1
		typeCurrent.value = index
		if(id){
			postData.value.alertTypeId = id
			havenIf.value = true
		}else{
			delete postData.value.alertTypeId
			havenIf.value = false
		}
		reqAlarmInfoList()	
		changeSort()
	}
</script>

<style lang="less" scoped>
	.processFlow{

		.tableWrap{
			margin-top: 28rpx;
		}
		.sort{
				width: 50rpx;
				height: 46rpx;
		}
		
	}

.popup_wrap{
	padding: 28rpx;
	background-color:#fff;
	border-radius: 10rpx 10rpx 0 0;
	.popup_title{
		font-size: 28rpx;
		color: #999999;
		margin-bottom: 24rpx;
	}
	.popup_content{
		display: flex;
		flex-wrap: wrap;
		.popup_item{
			height: 56rpx;
			line-height: 56rpx;
			padding: 0 24rpx;
			background: #F2F8FF;
			border-radius: 8rpx;
			margin:0 16rpx 24rpx 0;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
		}
		.popActive{
			background: linear-gradient( 180deg, #73B6FF 0%, #1881F4 100%);
			color: #FFFFFF;
		}
	}
}

</style>